<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
const tableData = ref([])
let imgs=ref([])
const userData = ref(null);

  const storedData = localStorage.getItem('key');
  if (storedData) {
    userData.value = JSON.parse(storedData);
  }
// const data = userData.value ? userData.value.data : null;

const consultantId=userData.value.data.consultantId;
const imgName=userData.value.data.avatar;
 console.log(userData.value.data);
// console.log(tableData.value[0].data.courseIamge);
const showAllinfo=function (){
  axios.get("/course/selectAllInfoByconsultantId?consultantId="+consultantId)
  .then((res)=>{
    console.log(res.data.data);
    tableData.value = res.data.data;
    console.log(tableData.value[0].courseImage);
    for (let i = 0; i < tableData.value.length; i++) {
      const url = `/file/download/${tableData.value[i].courseImage}`
      axios.get(url)
          .then((res)=>{
            // console.log(res.data);
            imgs.value[i] = res.data;
          })
          .catch(error=>{
            console.log(error)
          })
    }
  })
}
showAllinfo();
let showAddBox=ref(false);
let courseName=ref("")
let courseIntroduction=ref("")
let targetAudience=ref("")
let learningOutcomes=ref("")
let subscriptionNotice=ref("")
let originalPrice=ref()
let discount=ref()
let totalDuration=ref()
let lessonCount=ref()
let validity=ref()
let studyTimes=ref()
let reviewCount=ref()
let favoriteCount=ref()
let newName=ref("")
let addBtn=ref()
let changeBtn=ref()
//添加课程
const addCourse=function (){
  showAddBox.value=true
  addBtn.value=true
  changeBtn.value=false
}
const videoUrl=ref("")
//确定
const addTrue=function (){
  const formData = new FormData();
  const formData2=new FormData();
  formData.append('file', document.getElementById('fm').files[0]);
  formData2.append('video',document.getElementById('video').files[0]);
axios.post('/course/upload2',formData2)
    .then((res)=>{
      videoUrl.value=res.data;
      console.log(res.data);
      axios.post("/course/upload",formData)
          .then((res)=>{
            console.log(res.data.data);
            newName.value=res.data.data;
            axios.post("course/insert",{
              courseName:courseName.value,
              courseVideo: videoUrl.value,
              courseIntroduction:courseIntroduction.value,
              targetAudience:targetAudience.value,
              learningOutcomes:learningOutcomes.value,
              subscriptionNotice:subscriptionNotice.value,
              originalPrice:originalPrice.value,
              discount:discount.value,
              courseImage:newName.value,
              consultantId:consultantId,
              totalDuration:totalDuration.value,
              lessonCount:lessonCount.value,
              validity:validity.value,
              studyTimes:studyTimes.value,
              reviewCount:reviewCount.value,
              favoriteCount:favoriteCount.value,
            }).then((res)=>{
              console.log(res.data);
              showAllinfo()
              courseName.value = ""
              courseIntroduction.value = ""
              targetAudience.value = ""
              learningOutcomes.value = ""
              subscriptionNotice.value = ""
              originalPrice.value = ""
              discount.value = ""
              totalDuration.value = ""
              lessonCount.value = ""
              validity.value = ""
              studyTimes.value = ""
              reviewCount.value = ""
              favoriteCount.value = ""
              showAddBox.value=false
            })
          })
          .catch(error=>{
            console.log(error)
          })

  })
  .catch((err)=>{
    console.log(err)
  })


}
//取消
const addFalse=function (){
  showAddBox.value=false
  showWare.value=false
  courseName.value = ""
  courseIntroduction.value = ""
  targetAudience.value = ""
  learningOutcomes.value = ""
  subscriptionNotice.value = ""
  originalPrice.value = ""
  discount.value = ""
  totalDuration.value = ""
  lessonCount.value = ""
  validity.value = ""
  studyTimes.value = ""
  reviewCount.value = ""
  favoriteCount.value = ""
}

//删除
const del=function (index){
  axios.delete("/course/deleteById?id="+tableData.value[index].courseId)
      .then((res)=>{
    console.log(res.data);
    showAllinfo()
  })
      .catch(error=>{
    console.log(error)
  })
}
const cid=ref(0)
//修改
const changeInfo=function (index){
  showAddBox.value=true
  addBtn.value=false
  changeBtn.value=true
  courseName.value=tableData.value[index].courseName
  courseIntroduction.value=tableData.value[index].courseIntroduction
  targetAudience.value=tableData.value[index].targetAudience
  learningOutcomes.value=tableData.value[index].learningOutcomes
  subscriptionNotice.value=tableData.value[index].subscriptionNotice
  originalPrice.value=tableData.value[index].originalPrice
  discount.value=tableData.value[index].discount
  totalDuration.value=tableData.value[index].totalDuration
  lessonCount.value=tableData.value[index].lessonCount
  validity.value=tableData.value[index].validity
  studyTimes.value=tableData.value[index].studyTimes
  reviewCount.value=tableData.value[index].reviewCount
  favoriteCount.value=tableData.value[index].favoriteCount
  console.log(tableData.value[index].courseId);
 cid.value=tableData.value[index].courseId
  console.log(cid.value);

}
//提交修改
const changeTrue=function (){
  axios.put("/course/updateById", {
    courseId: cid.value,
    courseName: courseName.value,
    courseIntroduction: courseIntroduction.value,
    targetAudience: targetAudience.value,
    learningOutcomes: learningOutcomes.value,
    subscriptionNotice: subscriptionNotice.value,
    originalPrice: originalPrice.value,
    discount: discount.value,
    courseImage: newName.value,
    consultantId: consultantId,
    totalDuration: totalDuration.value,
    lessonCount: lessonCount.value,
    validity: validity.value,
    studyTimes: studyTimes.value,
    reviewCount: reviewCount.value,
    favoriteCount: favoriteCount.value,
  }).then((res) => {
    console.log(res.data);
    showAllinfo()
    showAddBox.value = false
    //把输入框的值重置
    courseName.value = ""
    courseIntroduction.value = ""
    targetAudience.value = ""
    learningOutcomes.value = ""
    subscriptionNotice.value = ""
    originalPrice.value = ""
    discount.value = ""
    totalDuration.value = ""
    lessonCount.value = ""
    validity.value = ""
    studyTimes.value = ""
    reviewCount.value = ""
    favoriteCount.value = ""
  })
    .catch(error => {
      console.log(error)
    })
}

let search=ref("")
console.log(search.value)
console.log(consultantId)
const searchBtn=function (){
  console.log(search.value)
  axios.get("/course/selectAllInfoLike?courseName="+search.value+"&consultantId=" + consultantId).then((res) => {
    console.log(res.data.data);
    tableData.value=res.data.data

  })
    .catch(error => {
      console.log(error)
    })
  }
  let showWare=ref(false)

let wareName=ref("")
let wareTime=ref(0)

const addWare=function (index){
  showWare.value=true
  cid.value=tableData.value[index].courseId

}
const addWareTrue=function() {
  console.log(cid.value)
  axios.post("/coursewareList/insert", {
    coursewareName: wareName.value,
    duration: wareTime.value,
    courseId: cid.value
  })
      .then((res) => {
        console.log(res.data);
        showWare.value = false
        wareName.value = ""
        wareTime.value = 0
        showAllinfo()
      })
      .catch(error => {
        console.log(error)
      })
}
</script>

<template>
<div class=box>
<button @click="addCourse" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">添加</button>

  <div class="search_container">
    <input type="text" id="search_input" placeholder="请输入搜索的课程名称" v-model="search">
    <button type="button" class="submit_search" @click="searchBtn">点击搜索</button>
  </div>

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="courseId" label="课程编号" />
    <el-table-column prop="courseName" label="课程名称" />
    <el-table-column prop="courseIntroduction" label="课程简介"/>
    <el-table-column prop="targetAudience" label="适用人群" />
    <el-table-column prop="learningOutcomes" label="学习收获" />
    <el-table-column prop="subscriptionNotice" label="订阅须知" />
    <el-table-column prop="originalPrice" label="原始价格" />
    <el-table-column prop="discount" label="折扣" />
        <el-table-column label="课程封面">
          <template #default="scope">
            <img :src="imgs[scope.$index]" alt="">
          </template>
        </el-table-column>
    <el-table-column prop="totalDuration" label="课程总时长" />
    <el-table-column  label="课程视频" width="200px">
      <template #default="scope">
      <video controls>
        <source :src="tableData[scope.$index].courseVideo" type="video/mp4">
      </video>
      </template>
    </el-table-column>
    <el-table-column prop="studyTimes" label="学习次数" />
    <el-table-column prop="reviewCount" label="评价数" />
    <el-table-column prop="favoriteCount" label="收藏数" />
    <el-table-column label="删除" width="150">
      <template #default="scope">
        <button @click="del(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">删除</button>
      </template>
    </el-table-column>

    <el-table-column label="编辑" width="150">
      <template #default="scope">
        <button @click="changeInfo(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>
      </template>
    </el-table-column>

    <el-table-column label="添加课程章节" width="150">
      <template #default="scope">
        <button @click="addWare(scope.$index)"  style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>
      </template>
    </el-table-column>
  </el-table>

  <div class="add_box" v-show="showAddBox">
    <div style="height: 30px;line-height: 30px;text-align: center;margin-top: 10px">添加课程</div>
    <input type="text" v-model="courseName" placeholder="课程名称">
   <div style="display: flex;height: 30px;line-height:30px">视频:<input type="file" id="video" placeholder="视频"></div>
    <div style="display: flex;height: 30px;line-height: 30px">封面:<input type="file" id="fm" placeholder="封面"></div>
    <input type="text" v-model="courseIntroduction" placeholder="课程简介">
    <input type="text" v-model="targetAudience" placeholder="适用人群">
    <input type="text" v-model="learningOutcomes" placeholder="学习收获">
    <input type="text" v-model="subscriptionNotice" placeholder="订阅须知">
    <input type="text" v-model="originalPrice" placeholder="原始价格">
    <input type="text" v-model="discount" placeholder="折扣">
    <input type="text" v-model="totalDuration" placeholder="课程总时长">
    <input type="text" v-model="lessonCount" placeholder="课件数">
    <input type="text" v-model="validity" placeholder="有效期">
    <input type="text" v-model="studyTimes" placeholder="学习次数">
    <input type="text" v-model="reviewCount" placeholder="评价数">
    <input type="text" v-model="favoriteCount" placeholder="收藏数">
    <button v-show="addBtn" @click="addTrue" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">添加</button>
    <button v-show="changeBtn" @click="changeTrue" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">编辑</button>

    <button @click="addFalse" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">取消</button>

  </div>
  <div class="add_box" v-show="showWare">
    <div style="height: 30px;line-height: 30px;text-align: center;margin-top: 10px">添加课程章节</div>
    <input type="text" v-model="wareName" placeholder="章节名称">
    <input type="text" v-model="wareTime" placeholder="章节时长">
    <button @click="addWareTrue" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">添加</button>
    <button @click="addFalse" style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none">取消</button>
  </div>
</div>


</template>

<style scoped>
img{
  height: 50px;
  width: 50px;
}
.box{
  margin-top: 20px;
}
.add_box{
  background-color: white;
  height: 800px;
  width: 420px;
  position: absolute;
  top: 50px;
  left: 43%;
  z-index: 9;
 /* display: flex;
  flex-wrap: wrap;*/
border: deepskyblue solid 2px;
  border-radius: 10px;
}
.add_box input{
  display: block;
  height: 25px;
  width: 300px;
  margin-top: 9px;
  margin-left:50px;
  padding: 5px;
}
.add_box button{
 margin-top: 10px;
  margin-left: 65px;
}


.search_container {
  display: flex;
  align-items: center;
  border: 2px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 400px;
  margin: 20px auto;
}

#search_input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  outline: none;
  font-size: 16px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.submit_search {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: background-color 0.3s;
}

.submit_search:hover {
  background-color: #0056b3;
}
video{
  width:200px;
  height: 100px;
}
</style>